<template>
	<xn-form-container
		:title="formData.id ? '编辑客户信息' : '增加客户信息'"
		:width="700"
		v-model:open="open"
		:destroy-on-close="true"
		@close="onClose"
	>
		<a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
			<a-tabs v-model:activeKey="activeTabsKey">
				<a-tab-pane key="1" tab="基础信息" force-render>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="所属门店：" name="objectStoreId">
								<xn-page-select
									ref="xnobjectStoreIdPageSelectRef"
									v-model:value="formData.objectStoreId"
									placeholder="请选择所属门店"
									allow-clear
									show-search
									:page-function="objectStoreIdSelector"
									:echo-function="objectStoreIdEcho"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="客户类型：" name="objectGradeId">
								<xn-page-select
									ref="xnobjectGradeIdPageSelectRef"
									v-model:value="formData.objectGradeId"
									placeholder="请选择客户类型"
									allow-clear
									show-search
									:page-function="objectGradeIdSelector"
									:echo-function="objectGradeIdEcho"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="对接负责人：" name="objectPerson">
								<xn-page-select
									ref="xnobjectPersonPageSelectRef"
									v-model:value="formData.objectPerson"
									placeholder="请选择负责人"
									allow-clear
									show-search
									:page-function="objectPersonSelector"
									:echo-function="objectPersonEcho"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="客户名称：" name="objectName">
								<a-input v-model:value="formData.objectName" placeholder="请输入客户名称" allow-clear/>
							</a-form-item>
						</a-col>

						<a-col :span="12">
							<a-form-item label="客户电话：" name="objectTel">
								<a-input v-model:value="formData.objectTel" placeholder="请输入客户电话" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="客户地址：" name="objectAddress">
								<a-input v-model:value="formData.objectAddress" placeholder="请输入客户地址"
										 allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="默认折扣：" name="objectDiscount">
								<a-input v-model:value="formData.objectDiscount" placeholder="请输入默认折扣"
										 allow-clear/>
							</a-form-item>
						</a-col>


						<a-col :span="12">
							<a-form-item label="联系人：" name="objectContact">
								<a-input v-model:value="formData.objectContact" placeholder="请输入联系人" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="客户状态：" name="objectStatus">
								<a-radio-group v-model:value="formData.objectStatus" :options="objectStatusOptions"/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="允许访问商城：" name="objectAllowtovisitmail">
								<a-radio-group v-model:value="formData.objectAllowtovisitmail"
											   :options="objectAllowtovisitmailOptions"/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="客户积分：" name="objectScore">
								<a-input v-model:value="formData.objectScore" placeholder="请输入客户积分" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="累计积分：" name="objectScoreTotal">
								<a-input v-model:value="formData.objectScoreTotal" placeholder="请输入累计积分"
										 allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="推荐人：" name="objectReference">
								<xn-page-select
									ref="xnobjectReferencePageSelectRef"
									v-model:value="formData.objectReference"
									placeholder="请选择推荐人"
									allow-clear
									show-search
									:page-function="objectReferenceSelector"
									:echo-function="objectReferenceEcho"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="默认发货方式：" name="objectDelivery">
								<xn-page-select
									ref="xnobjectDeliveryPageSelectRef"
									v-model:value="formData.objectDelivery"
									placeholder="请选择默认发货方式"
									allow-clear
									show-search
									:page-function="objectDeliverySelector"
									:echo-function="objectDeliveryEcho"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="备注：" name="objectRemark">
								<a-input v-model:value="formData.objectRemark" placeholder="请输入备注" allow-clear/>
							</a-form-item>
						</a-col>

						<a-col :span="12">
							<a-form-item label="应收（余额）：" name="objectAllowCredit">
								<a-input v-model:value="formData.objectAllowCredit" placeholder="请输入应收账款"
										 allow-clear/>
							</a-form-item>
						</a-col>
					</a-row>
				</a-tab-pane>
				<a-tab-pane key="2" tab="更多信息" force-render>
					<a-row :gutter="16">
						<a-col :span="12">
							<a-form-item label="客户标签：" name="objectTag">
								<xn-page-select
									ref="xnobjectTagPageSelectRef"
									v-model:value="formData.objectTag"
									placeholder="请选择客户标签"
									allow-clear
									show-search
									mode="multiple"
									:page-function="objectTagSelector"
									:echo-function="objectTagEcho"
								/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="邮箱：" name="objectEmail">
								<a-input v-model:value="formData.objectEmail" placeholder="请输入邮箱" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="开户行：" name="objectBank">
								<a-input v-model:value="formData.objectBank" placeholder="请输入开户行" allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="银行账户：" name="objectBankCode">
								<a-input v-model:value="formData.objectBankCode" placeholder="请输入银行账户"
										 allow-clear/>
							</a-form-item>
						</a-col>
						<a-col :span="12">
							<a-form-item label="附件：" name="objectAttachment">
								<xn-upload v-model:value="formData.objectAttachment" :uploadNumber=10
										   uploadMode="image"/>
							</a-form-item>
						</a-col>
					</a-row>
				</a-tab-pane>
			</a-tabs>
		</a-form>
		<template #footer>
			<a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
		</template>
	</xn-form-container>
</template>

<script setup name="supplierCustomForm">
import tool from '@/utils/tool'
import {cloneDeep} from 'lodash-es'
import {required} from '@/utils/formRules'
import supplierObjectsApi from "@/api/supplier/custom/supplierObjectsApi";
import supplierCustomTypeApi from "@/api/supplier/custom/supplierCustomTypeApi";
import supplierStoresApi from "@/api/supplier/base/supplierStoresApi";
import supplierCustomTagApi from "@/api/supplier/custom/supplierCustomTagApi";
import supplierDeliveryApi from "@/api/supplier/base/supplierDeliveryApi";
import {ref} from "vue";
import supplierUserApi from "@/api/supplier/structure/supplierUserApi";
// 抽屉状态
const open = ref(false)
const emit = defineEmits({successful: null})
const formRef = ref()
// 表单数据
const formData = ref({})
const activeTabsKey = ref('1')
const submitLoading = ref(false)
const xnobjectGradeIdPageSelectRef = ref();
const objectGradeIdSelector = (param) => {
	return supplierCustomTypeApi.supplierCustomTypePage(param).then((data) => {
		if (data.records) {
			data.records = data.records.map((item) => {
				return {
					name: item.customTypeName,
					id: item.id,
				};
			});
		}
		return Promise.resolve(data)
	})
}
const objectGradeIdEcho = (param) => {
	let echoList = []
	let echo =  {}
	for(var i=0;i<param.idList[0].length;i++){
		echo.name = formData.value.objectGradeIdName
		echo.id = param.idList[0][i]
		echoList.push(echo)
	}
	return Promise.resolve(echoList)
}

const xnobjectStoreIdPageSelectRef = ref();
const objectStoreIdSelector = (param) => {
	return supplierStoresApi.supplierStoresPage(param).then((data) => {
		if (data.records) {
			data.records = data.records.map((item) => {
				return {
					name: item.storeName,
					id: item.id,
				};
			});
		}
		return Promise.resolve(data)
	})
}
const objectStoreIdEcho = (param) => {
	let echoList = []
	let echo =  {}
	for(var i=0;i<param.idList[0].length;i++){
		echo.name = formData.value.objectStoreIdName
		echo.id = param.idList[0][i]
		echoList.push(echo)
	}
	return Promise.resolve(echoList)
}
const xnobjectPersonPageSelectRef = ref();
const objectPersonSelector = (param) => {
	return supplierUserApi.userPage(param).then((data) => {
		if (data.records) {
			data.records = data.records.map((item) => {
				return {
					name: item.name,
					id: item.id,

				};
			});
		}
		return Promise.resolve(data)
	})
}
const objectPersonEcho = (param) => {
	let echoList = []
	let echo =  {}
	for(var i=0;i<param.idList[0].length;i++){
		echo.name = formData.value.objectPersondName
		echo.id = param.idList[0][i]
		echoList.push(echo)
	}
	return Promise.resolve(echoList)
}
const xnobjectTagPageSelectRef = ref();
const objectTagSelector = (param) => {
	return supplierCustomTagApi.supplierCustomTagPage(param).then((data) => {
		if (data.records) {
			data.records = data.records.map((item) => {
				return {
					name: item.customTag,
					id: item.id,
				};
			});
		}
		return Promise.resolve(data)
	})
}
const objectTagEcho = (param) => {
	let echoList = []
	let echo =  {}
	for(var i=0;i<param.idList[0].length;i++){
		echo.name = formData.value.objectTagName[i]
		echo.id = param.idList[0][i]
		echoList.push(echo)
	}
	return Promise.resolve(echoList)
}

const objectStatusOptions = [{label:'停用', value:'0'},{label:'正常', value:'1'}]
const xnobjectReferencePageSelectRef = ref();
const objectReferenceSelector = (param) => {
	return supplierObjectsApi.supplierObjectsPage(param).then((data) => {
		if (data.records) {
			data.records = data.records.map((item) => {
				return {
					name: item.objectName,
					id: item.id,
				};
			});
		}
		return Promise.resolve(data)
	})
}
const objectReferenceEcho = (param) => {
	let echoList = []
	let echo =  {}
	for(var i=0;i<param.idList[0].length;i++){
		echo.name = formData.value.objectReferenceName
		echo.id = param.idList[0][i]
		echoList.push(echo)
	}
	return Promise.resolve(echoList)
}
const objectAllowtovisitmailOptions = [{label:'允许',value: '1'}, {label:'拒绝',value: '0'}]
const xnobjectDeliveryPageSelectRef = ref();
const objectDeliverySelector = (param) => {
	return supplierDeliveryApi.supplierDeliveryPage(param).then((data) => {
		if (data.records) {
			data.records = data.records.map((item) => {
				return {
					name: item.delivery,
					id: item.id,
				};
			});
		}
		return Promise.resolve(data)
	})
}
const objectDeliveryEcho = (param) => {
	let echoList = []
	let echo =  {}
	for(var i=0;i<param.idList[0].length;i++){
		echo.name = formData.value.objectDeliveryName
		echo.id = param.idList[0][i]
		echoList.push(echo)
	}
	return Promise.resolve(echoList)
}

// 打开抽屉
const onOpen = (record) => {
	open.value = true
	if (record) {
		let recordData = cloneDeep(record)
		formData.value = Object.assign({}, recordData)
		formData.value.objectTag = formData.value.objectTag.split(',')
		formData.value.objectTagName = formData.value.objectTagName.split(',')
	}
	nextTick(() => {
		xnobjectPersonPageSelectRef.value.onPage({current: 1});
		xnobjectGradeIdPageSelectRef.value.onPage({current: 1});
		xnobjectStoreIdPageSelectRef.value.onPage({current: 1});
		xnobjectReferencePageSelectRef.value.onPage({current: 1, objectType:'1'});
		xnobjectDeliveryPageSelectRef.value.onPage({current: 1});
		xnobjectTagPageSelectRef.value.onPage({current: 1})
	});
}
// 关闭抽屉
const onClose = () => {
	formRef.value.resetFields()
	formData.value = {}
	open.value = false
}
// 默认要校验的
const formRules = {
	objectName: [required('请输入客户名称')],
	objectGradeId: [required('请输入客户类型')],
	objectTel: [required('请输入客户电话')],
	objectStoreId: [required('请输入所属门店')],
}
// 验证并提交数据
const onSubmit = () => {
	formRef.value
		.validate()
		.then(() => {
			submitLoading.value = true
			const formDataParam = cloneDeep(formData.value)
			formDataParam.objectType = "1"  //客户
			formDataParam.objectTag = formDataParam.objectTag.join(',')
			supplierObjectsApi
				.supplierObjectsSubmitForm(formDataParam, formDataParam.id)
				.then(() => {
					onClose()
					emit('successful')
				})
				.finally(() => {
					submitLoading.value = false
				})
		})
		.catch(() => {
		})
}
// 抛出函数
defineExpose({
	onOpen
})
</script>
